/*
 * @Descripttion:
 * @version:
 * @Author: ChenXiang
 * @Date: 2021-07-10 12:02:05
 * @LastEditors: ChenXiang
 * @LastEditTime: 2021-09-10 14:10:31
 */
import React, {
  useState,
  useEffect,
  FC,
} from "react";
import './checkbox.scss';

interface propsType {
  value?: string
  type: "radio" | "checkbox";
  name?: string
  icon?: "sure" | "cancel"//sure: icon 是√ cancel 是x
  checked?: boolean // 是否默认选中
  circle?: boolean;// false方形， true圆形
  onChange?: (selected) => void;
  children?: any;
}


export const CheckBox: FC<any> = (props: propsType) => {
  const { value, onChange, name = '', type = "checkbox", icon = 'sure', checked = false, circle = false } = props;
  const [isChecked, setIsChecked] = useState(checked)
  useEffect(() => {
    if (type === 'radio' && name === '') {
      console.error('请填写name属性')
    }
  });

  return (
    <label className='checkbox-label'>
      <input name={name} style={{ borderRadius: circle === true ? '50%' : 'unset' }} type={type} onChange={(e) => {
        setIsChecked(!isChecked)
        if (type === 'checkbox') {
          onChange && onChange({ value, checked: !isChecked })
        }
      }}

        onClick={() => {
          if (type === 'radio') {
            onChange && onChange(value)
          }
        }}
        className={`checkbox-${icon} checkbox`} checked={isChecked} />
      {props.children ? props.children : null}
    </label>
  )
};

export default CheckBox;
